<template>
  <div  class="chongzeng">
    <div class="t">
      <div class="t1"></div>
      <van-nav-bar
        title="选择咖啡"
         right-text="转赠记录"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>

    <div class="m">
      <div class="t">
        <div class="t1">
          购买以下饮品券享<span>充2赠1</span>，不同饮品劵可组合购买
        </div>
      </div>

      <div class="z">
        <div class="b1">
          <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B1全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B2全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value1" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B3全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value2" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B4全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value3" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B5全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value4" class="b13"/>
        </div>
        <div class="b1">
           <div class="b11">
            ￥<span>21</span>
          </div>
          <div class="b12">
            <span>B6全国通用</span>
            <p>期限：2018.12.25-2021.12.24</p>
          </div>
            <van-stepper v-model="value5" class="b13"/>
        </div>
      </div>

    </div>

    <div class="b">
      <div class="zeng">
        <p>赠送好友</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
      value1: 0,
      value2: 0,
      value3: 0,
      value4: 0,
      value5: 0
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push({name:'QianBao'});
    },
    onClickRight(){
      this.$router.push({name:'ZhuanZeng'});
    }
  }
}
</script>


<style scoped>
  .chongzeng{
    width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.t{
  height: 64px;
}
.t1{
  height: 20px;
}
.t2{
  height: 44px;
}
.m{
  flex:1;
  background: ghostwhite;
  overflow-y: auto;
  padding: 0 15px;
}
.m .t .t1{
  height: 60px;
  font-size: 14px;
  line-height: 60px;
}
.m .b1{
   height: 60px;
   color: rgba(80, 80, 80, 1);
	 background-color: rgba(255, 255, 255, 1);
	 box-shadow: rgba(242, 242, 242, 1) solid 1px;
	 font-size: 12px;
   display: flex;
   /* line-height: 60px; */
   margin-bottom: 10px;
}
.b11{
  margin-left: 10px;
  width: 46px;
  line-height: 50px;
}
.b11 span{
  font-size: 23px;
}
.b12{
  width: 165px;
}
.b12 p{
  margin: 5px 0;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b1 .b12 span{
  display: block;
  margin-top: 10px;
  font-weight: bold;
}
.b13{
  line-height: 60px;
}
.b13 .jian span{
  background: palegreen;
  display: block;
  width: 16px;
  height: 16px;
}
.m .t .t1 span{
  color: orange;
}
.b{
  height: 40px;
  padding: 20px;
}
.zeng{
  background: skyblue;
  height: 100%;
  border-radius: 10px;
}
.zeng p{
  margin: 0;
  line-height: 40px;
  text-align: center;
  color: white;
  font-size: 18px;
}
</style>
